<template>
  <div class="brother">
    <div>h(｡･∀･)ﾉﾞ嗨， 我是兄弟组件</div>
    <h3>使用 $emit, $on的方法实现组件间通信，包括 父子， 兄弟， 跨级</h3>
    <h4>
      这种方法通过一个空的Vue 实例作为中央事件总线，用它来触发事件和监听事件
    </h4>
    <div>
      <ul v-for="item in stuData" :key="item.name">
        <li>{{ item.name }} -- {{ item.age }} 岁</li>
      </ul>
    </div>

    <div v-if="data !== ''" class="div_bg">
      这是从父组件通过 $refs 传递的 data -----{{ data }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stuData: [],
      data: ''
    }
  },
  methods: {
    emitEvent(msg) {
      this.data = msg
    }
  },
  created() {
    this.bus.$on('add', data => {
      this.stuData = data
      console.log(data, 'data')
    })
    console.log(this.bus.$on('add'), 'vue')
  }
}
</script>

<style scoped>
.brother {
  border: 1px solid #0f0;
  line-height: 2;
}
ul {
  list-style: none;
  margin-bottom: 20px;
}
.div_bg {
  background: #f00;
  color: #fff;
}
</style>
